<template>
	<view class="content">
		<!--顶部标题-->
		<view class="content_1">
			支付信息
		</view>
		<!--支付详细信息-->
		<view class="content_2">
			<!--费用详细-->
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">租房费用</view>
					<view class="cost_time">（{{rent_time}}）</view>
				</view>
				<view class="cost_money">{{renthouse_money}}</view>
			</view>
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">押金</view>
					<view class="cost_time"></view>
				</view>
				<view class="cost_money">{{mortgage_money}}</view>
			</view>
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">服务费</view>
					<view class="cost_time">按房费比例3%）</view>
				</view>
				<view class="cost_money">{{tip_money}}</view>
			</view>
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">已使用积分抵扣</view>
					<view class="cost_time"></view>
				</view>
				<view class="cost_money" style="color: #FE4E2C;">-￥{{point_money}}</view>
			</view>
			<!-- 已使用优惠券抵扣 -->
			<!-- <view class="detail_money">
					<view class="costdetail_box">
						<view class="cost_name">已使用优惠券抵扣</view>
						<view class="cost_time"></view>
					</view>
					<view class="cost_money" style="color: #FE4E2C;">¥600.00</view>
				</view> -->
		</view>
		<!--底部提交-->
		<view class="content_5">
			<view class="total_view">
				<image class="total_icon" src="../../static/index/detail/pay/house_pay.svg"></image>
				<view class="total_money">
					<view class="pay_money">{{order_money}}</view>
					<view class="count_money">已优惠{{point_money}}</view>
				</view>
			</view>
			<view class="submit">去支付</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../utils/request.js';
	//定义getApp对象
	const app = getApp();

	export default {
		data() {
			return {

			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content_1 {
		height: 88upx;
		background-color: #B3E9DC;
		line-height: 88upx;
		font-size: 28upx;
		color: #FFFFFF;
		font-weight: bold;
		padding-left: 30upx;
	}
	
	/*
		费用详细样式
	*/
	.content_2 {
		height: 340upx;
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40upx;
	}
	
	.detail_money {
		width: 100%;
		height: 38upx;
		line-height: 38upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.costdetail_box {
		height: 38upx;
		font-size: 28upx;
		display: flex;
		align-items: baseline;
		color: #333333;
	}
	
	.cost_name {
		margin-right: 10upx;
	}
	
	.cost_time {
		font-size: 18upx;
		color: #999999;
	}
	
	.cost_money {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}
	
	/*
		底部提交样式
	*/
	.content_5 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 734upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 20upx;
	}
	
	.total_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}
	
	.total_icon {
		height: 92upx;
		width: 92upx;
	
	}
	
	.total_money {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.pay_money {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
	}
	
	.count_money {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
	}
	
	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
</style>
